<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>59-letao</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./lib/bootstrap-validator/css/bootstrapValidator.min.css">
  <link rel="stylesheet" href="./lib/nprogress/nprogress.css">
  <link rel="stylesheet" href="./css/common.css">

</head>

<body class="pl-180">
  <!-- 侧边栏 -->
  <div class="lt-aside bg-color">
    <!-- 标题 -->
    <h4 class="brand">皮肤管理系统</h4>
    <!-- 用户信息 -->
    <div class="info">
      <img src="./images/default.png" alt="">
      <p>超级管理员</p>
    </div>
    <!-- 导航 -->
    <ul class="aside-nav">
      <li ><a href="customer.html"> <i class="glyphicon glyphicon-user"></i>客户管理</a></li>
      <li class="current">
        <a class="nav-link" href="serviceitemlist.html"> <i class="glyphicon glyphicon-th-list"></i> 服务项目管理</a>
        <li><a href="order.html"> <i class="glyphicon glyphicon-gift"></i> 订单管理页面</a></li>
       <!--<li><a href="product.html"> <i class="glyphicon glyphicon-gift"></i> 服务销售功能</a></li>-->
        <li><a href="banner.html"> <i class="glyphicon glyphicon-gift"></i> 轮播图展示页面</a></li>
    </ul>

  </div>
  <!-- 右侧主体 -->
  <div class="lt-main">
    <!-- 头部 -->
    <div class="lt-top pl-180">
      <a href="#" class="menu pull-left"> <i class="glyphicon glyphicon-th-large"></i> </a>
      <a href="#" class="logout pull-right"> <i class="glyphicon glyphicon-log-out"></i> </a>
    </div>
    <!-- 内容区域 -->
    <div class="lt-content">
      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li><a href="#">后台管理</a></li>
        <li class="active">用户</li>
      </ol>
    <!-- 布局 -->
    <button id="clear" class="btn aaaaa btn-default" data-toggle="modal" data-target=".modal-add">添加商品</button>
      <!-- 表格布局 -->
      <table class="table table-bordered text-center table-hover">
        <thead >
          <tr>
           <!-- <th>序号</th>-->
            <th>服务创建时间</th>
            <th>服务名称</th>
            <th>订单创建时间</th>
            <th>备注</th>
            <th>服务状态</th>
            <th>服务电话</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>


      <!-- 分页父容器 -->
      <ul id="paginator"></ul>

    </div>
  </div>

  <!-- 模态框 -->
  <!-- 添加模态框 -->
  <div class="modal fade modal-add" tabindex="-1" role="dialog">
      <div class="modal-dialog " role="document">
          <div class="modal-content">

              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                          aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">添加商品</h4>
              </div>

              <div class="modal-body">
                  <form id="form1" class="add-form">
                      <!-- 商品名称 -->
                      <div class="form-group">
                          <input type="text" name="createTime" class="form-control" placeholder="创建时间">
                      </div>
                      <!-- 商品库存 -->
                      <div class="form-group">
                          <input type="text" name="serviceName" class="form-control" placeholder="服务创建名称">
                      </div>
                      <!-- 商品描述 -->
                      <div class="form-group">
                          <textarea name="orderTime" class="form-control" placeholder="订单创建时间"></textarea>
                      </div>
                      <!-- 商品尺码 -->
                      <div class="form-group">
                          <input type="text" name="telephone" class="form-control" placeholder="电话">
                      </div>
                      <!-- 商品原价 -->
                      <div class="form-group">
                          <input type="text" name="remark" class="form-control" placeholder="备注">
                      </div>

                      <!-- 状态 -->
                      <div class="form-group">
                          <input type="text" name="station" class="form-control" placeholder="状态">
                      </div>
                  </form>
              </div>

              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <!-- 在html5中，表单新增 form属性， 可以用于指定当前表单所属表单域（form)  -->
                  <button type="submit" class="btn btn-primary" form="form1">添加</button>
              </div>

          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->



  <!-- 修改模态框 -->
  <div class="modal fade modal-edit" tabindex="-1" role="dialog">
      <div class="modal-dialog " role="document">
          <div class="modal-content">

              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                          aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">修改商品</h4>
              </div>

              <div class="modal-body">
                  <form id="form2" class="edit-form">
                      <!-- 客户id -->
                      <div class="form-group">
                          <input type="hidden" name="id" class="form-control" placeholder="客户id" >
                      </div>
                      <!-- 客户名称 -->
                      <div class="form-group">
                          <input type="text" name="createTime" class="form-control" placeholder="创建时间">
                      </div>
                      <!-- 性别 -->
                      <div class="form-group">
                          <input type="text" name="serviceName" class="form-control" placeholder="性别"
                                 value=" ">
                      </div>
                      <!-- 地址 -->
                      <div class="form-group">
                          <textarea name="orderTime" class="form-control" placeholder="地址" value="${res.data.address}"></textarea>
                      </div>
                      <!-- 电话 -->
                      <div class="form-group">
                          <input type="text" name="remark" class="form-control" placeholder="电话" value="${res.data.telephone}">
                      </div>
                      <!-- 备注 -->
                      <div class="form-group">
                          <input type="text" name="station" class="form-control" placeholder="备注" value="${res.data.remark}">
                      </div>
                      <!-- 生日 -->
                      <div class="form-group">
                          <input type="text" name="telephone" class="form-control" placeholder="生日" value="${res.data.birthday}">
                      </div>
                  </form>
              </div>

              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <!-- 在html5中，表单新增 form属性， 可以用于指定当前表单所属表单域（form)  -->
                  <button type="submit" class="btn2 btn-primary" form="form2">修改</button>
              </div>

          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->



  <!-- 模板 -->
  <!-- 在插值表达式是中 只能写 js 表达式  -->
  <!-- 序号 = i + 1  + 每页数据条数 * （页码-1） -->
  <script  id="tmp" type="text/html" >
    {{ each rows as v i }}
    <tr>
      <!--<td>{{ i + 1 + size * (page - 1) }}</td>-->
      <td style="display:none;">{{ v.id}}</td>
        <td>{{ v.createTime }}</td>
        <td>{{ v.serviceName }}</td>
        <td>{{ v.orderTime }}</td>
        <td>{{ v.remark }}</td>
        <td>{{ v.station}}</td>
        <td>{{ v.telephone}}</td>

        <td>
            <button class="btn1 btn-info" data-toggle="modal" data-target=".modal-edit"  data-a="{{v.id}}">修改</button>
            <button class="btn3 btn-info"  data-a="{{v.id}}">删除</button>
        </td>
    </tr>
    {{ /each }}
  </script>

  <script src="./lib/jquery/jquery.min.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="./lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
  <script src="./lib/bootstrap-paginator/bootstrap-paginator.js"></script>
  <script src="./lib/nprogress/nprogress.js"></script>
  <script src="./lib/artTemplate/template-web.js"></script>
  <script src="./js/serviceitemlist.js"></script>
</body>

</html>